<template>
  <div>
    <up-down-layout :header="'硬件信息管理'" :handleFlag="true" >
      <template slot="query">
        <search-form :componentList="componentList" :formValue="queryParas" @handleFilter="handleFilter"
          @clearParam="clearParam">
        </search-form>
      </template>
      <template slot="table">
        <!-- table表格 -->
        <data-table :toolMenuFlag="true" @onCreateRow="addData" :sourceData="sourceData" :queryParas="queryParas"
          @onEditRow="onEditRow" :menuFlag="false" :IsRight="false" :operateBtnLayout="operateBtnLayout"
          :columns="columns" :deleteApi="api" :api="api" :loadCount="loadCount" :operatWidth="'160px'" :reviewFun="reviewFun" :doReviewFun="true"
          >
          <template scope-slot="button" v-slot:button="row">
            <el-button v-if="row.row.dvState != 1 && row.row.dvState != 2" icon="el-icon-check" class="iconCircle" :title="'提交'" @click="auditSubmit(row)"></el-button>
            <el-button icon="el-icon-picture-outline-round" class="iconCircle" :title="'上传图片'" @click="submitImage(row)"></el-button>
            <!-- <el-button icon="el-icon-view" class="iconCircle" :title="'查看'" @click="hardwareChangeView(row)"></el-button> -->
          </template>
        </data-table>
      </template>
    </up-down-layout>
    <hardwareEdit :editModel="editModel" v-if="dialogVisible" :visible.sync="dialogVisible" :api="api" :form="item" @handSearch="handleFilter"/>
    <!-- <hardwareChangeView :editModel="editModel" v-if="changeViewDialogVisible" :visible.sync="changeViewDialogVisible" :api="api" :form="item" @handSearch="handleFilter"/> -->
  </div>
</template>
<script>
import BaseManage from '@/pages/baseManage'
import upDownLayout from '@/components/element/upDownLayout'
import searchForm from '@/components/element/searchForm'
import DataTable from '@/components/element/DataTable'
import businessApi from '@/api/business/businessApi'
import hardwareEdit from '@/pages/equipControl/hardwareManage/hardwareEdit'
// import hardwareChangeView from '@/pages/equipControl/hardwareManage/hardwareChangeView'
import { formatDict } from '@/filters/index'
import { funConfirm } from '@/utils/message'
export default {
  // 继承baseManage里的公共方法和定义的属性
  extends: new BaseManage(),
  name: 'hardwareManage',
  components: {
    upDownLayout,
    searchForm,
    DataTable,
    hardwareEdit
    // hardwareChangeView
  },
  data () {
    return {
        changeViewDialogVisible: false,
        componentList: [
            {
                prop: 'hardwareName',
                componentName: 'el-input',
                label: '设备名称：',
                lableWidth: '100px',
                value: 'hardwareName',
                placeholder: '请输入软件名称'
            },
            {
              label: '所属部门',
              prop: 'oweOrgId',
              componentName: 'cascaderOrg',
              options: [],
              cascaderProps: {emitPath: false},
              placeholder: '请先选择归属公司',
              value: 'oweOrgId'
            },
            {
              label: '使用单位',
              prop: 'useOrgId',
              componentName: 'cascaderOrg',
              options: [],
              cascaderProps: {emitPath: false},
              placeholder: '请先选择归属公司',
              value: 'useOrgId'
            }
        ],
        queryParas: {
          hardwareName: '',
          oweOrgId: '',
          useOrgId: ''
        },
        // talbe显示的每一项
        columns: [
          {
            prop: 'deviceCode',
            label: '编码',
            align: 'left'
           // width: '60px'
          },
          {
            prop: 'hardwareName',
            label: '设备名称',
            align: 'left'
          },
          {
            prop: 'deviceType',
            label: '分类',
            align: 'left',
            format: row => { return formatDict(row.deviceType, 'device_type') }
          },
          {
            prop: 'oweOrgName',
            label: '所属部门',
            align: 'left',
            width: '130px'
          },
          {
            prop: 'specification',
            label: '规格型号',
            align: 'left'
          },
          {
            prop: 'cUnit',
            label: '数量',
            align: 'right',
            width: '60px'
          },
          {
            prop: 'useOrgName',
            label: '使用单位',
            align: 'left',
            width: '130px'
          },
          {
            prop: 'dvState',
            label: '审核状态',
            align: 'center',
            width: '70px',
            format: row => { return this.statusColor(formatDict(row.dvState, 'audit_state')) }
          }
        ],
        operateBtnLayout: 'C,E,V'
    }
  },
  computed: {
    api () {
      return businessApi.dvhardware
    }
  },
  methods: {
    submitImage (row) {
      this.item = JSON.parse(JSON.stringify(row.row))
      this.item.isImage = true // 打开哪个tab
      if (row.row.dvState === '2' || row.row.dvState === '1') {
        this.editModel = 'V'
      } else {
        this.editModel = 'E'
      }
      this.dialogVisible = true
    },
     // 控制显示按钮
    reviewFun (column) {
      if (column.dvState === '2' || column.dvState === '1') { // 类型为消息没有编辑按钮
        return 'V'
      } else {
        return this.operateBtnLayout
      }
    },
    auditSubmit (data) {
      if (data.row.dvState === '2') { // 通过不能再提
        this.$message('通过不能再提')
        return
      }
      if (data.row.dvState === '1') { // 通过不能再提
        this.$message('审核已提交')
        return
      }
      funConfirm('是否提交审核？', () => {
        businessApi.dvhardware.examine(data.row.id, data.row).then(res => {
          this.success('提交成功')
          this.handleFilter()
        })
      })
    },
    // hardwareChangeView (data) {
    //   this.item = data.row
    //   this.changeViewDialogVisible = true
    // },
    // 点击表格操作项的按钮
    onEditRow (rowIndex, rowData, clickType) {
      this.editModel = clickType
      // 查看详情
      if (clickType === 'V') {
        this.item = rowData
        this.item.isImage = false
        // this.changeViewDialogVisible = true
        this.dialogVisible = true
      } else if (clickType === 'E') {
        if (rowData.dvState === '1' || rowData.dvState === '2') {
            this.editModel = 'V'
        }
        this.dialogVisible = true
        // 编辑数据
        this.item = JSON.parse(JSON.stringify(rowData))
        this.item.isImage = false
      }
    },
    // 状态颜色
    statusColor (val) {
      if (val === '通过') {
        return `<span style="color: #67C23A">${val}</span>`
      } else if (val === '审核中') {
        return `<span style="color: #F5A623">${val}</span>`
      } else if (val === '未提交') {
        return `<span style="color: #979797">${val}</span>`
      } else if (val === '退回') {
        return `<span style="color: #D0021B">${val}</span>`
      } else {
        return val
      }
    }
  }
}
</script>
